﻿<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<VCC.Site.ViewModels.SearchFullboxModel>" %>
<div class="home-search-box">
    <form method="post" action="/Search/index" id="FullBoxSearch">
        <div class="tops"><h1>Công cụ tìm kiếm</h1></div>
        <div class="contents">
            <div class="tab"></div>
            <div id="divOfSeach">
                <div class="home-product-search">
                    <div id="searchArea" style="overflow: hidden;">
                        <div style="position: relative;padding-left: 5px;" class="searchrow">
                            <div id="chArea" style="padding-top: 6px; padding-bottom: 6px;">
				                <span class="bslable">Chọn khu vực tìm kiếm</span>
					            <div class="search-keyword-box" onclick="FCTextInput();">
					                <%string listSubID = string.Empty;%>
					                <div id="list-subitem-fullsearch">
					                <%  if (Model.Suburb != null && Model.Suburb.Count() > 0)
                                    {
                                    foreach(var item in Model.Suburb){
                                        listSubID = listSubID + item.ID + ",";
                                     %>
                                    <div class="sub-item" id="FSearchSubID<%=item.ID%>"><%=item.FullName%><a href="javascript:RemoveFSSubItem(<%=item.ID%>)" title="Remove" class="remove"> × </a></div>
					                <%}}%>
					                </div>
					                <input type="text" id="txtKeywordSub" style=" border: 0 solid #ccc; color: #777; float: left; line-height: 19px; width:145px;" placeholder ="Nhập Suburb or PostCode" name="txtKeywordSub" class="txtKeywordSub" />
                                    
                                    <%=Html.Hidden("ListFullSubID",listSubID)%>
                                    <span id="loadingFullubur" style="display:none;float: left; padding: 4px;"><img src="/Images/indicator.gif"/></span>
                                </div>
                                <div class="clear"></div>
                            </div>
                            <div id="chCate">
                                <span class="bslable">Chọn danh mục</span>
                                <%=Html.DropDownList("FulldropCate" , new SelectList(Model.Categories, "Value", "Text", Model.Category != null ? Model.Category.ShortName : "" ).ToList(), new { @class = "required dropdown-list", style="width:240px", title = "Chọn danh mục tin rao bạn muốn tìm!" })%>
                            </div>
                            <div id="chTime" style="padding-top: 6px; padding-bottom: 6px;">
                                <span class="bslable">Chọn khoảng thời gian</span>
                                <div class="labletext">Từ Ngày:</div><input type="text" id="FromDate" value="<%= Model.FDate.Year > 2000 ? string.Format("{0:dd/MM/yyyy}", Model.FDate) : ""%>" name="FromDate" class="text-field mt5 datepicker" style = "width:90px;" placeholder = "dd/mm/yyyy" /> <br />
                                <div class="labletext">Tới:</div><input type="text" id="ToDate" value="<%= Model.TDate.Year > 2000 ? string.Format("{0:dd/MM/yyyy}", Model.TDate) : ""%>" name="ToDate" class="text-field mt5 datepicker" style = "width:90px;" placeholder = "dd/mm/yyyy" />
                            </div>
                            <div id="chKeyword">
                                <span class="bslable">Tìm kiếm theo từ khóa</span>
                                <%=Html.TextBoxFor(m => m.KeyWord, new { placeholder = "Nhập từ khóa cần tìm", @class = "text-field", style = "width:240px;" })%>
                            </div>
                            <div class="clear"></div>
                        </div>
                    </div>
                    <div class="timkiems">
                        <input type="image" onclick="FullSearchBoxSubmit();"  name="action" id="btnSearch" src="/Images/Search/timkiem.jpg" />
                        <%=Html.Hidden("IsSubmitSearchForm",true)%>
                    </div>
                    <div class="message">
                        Có <strong>Hàng trăm</strong> tin mới mỗi ngày
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>
<script type="text/javascript">
    function FCTextInput() {
        $("#txtKeywordSub").focus();
    }
    /*--Remove Full Search subur item */
    function RemoveFSSubItem(id) {
        $("#FSearchSubID" + id).remove();
        var s = $("#ListFullSubID").val();
        var snew = s.replace(id + ",", "");
        $("#ListFullSubID").val(snew);
        if (snew == "" || snew == " ") {
            $("#txtKeywordSub").attr("Style", "width:145px");
            $("#txtKeywordSub").attr("placeholder", "Nhập Suburb or PostCode");
        }
    }
    // Start Load du lieu Autocomplete for box full search//
    $("#txtKeywordSub").autocomplete({
        minLength: 2,
        source: function(request, response) {
        $("#loadingFullubur").show();
            var dm = GetDomain();
            var ul = dm + "/AjaxData/SearchSuburb";
            $.ajax({
                url: ul,
                dataType: "json",
                data: {
                    keyword: extractLast(request.term)
                },
                success: function(data) {
                $("#loadingFullubur").hide();
                    response($.map(data, function(item) {
                        return {
                            label: item.FullName,
                            value: item.Keyword,
                            id: item.ID
                        }
                    }));
                }
            });
        },
        focus: function() {
            return false;
        },
        select: function(event, ui) {
            var terms = split(this.value);
            terms.pop();
            terms.push("");
            this.value = terms.join("");
            var subitem = "<div id=\"FSearchSubID" + ui.item.id + "\" class=\"sub-item\">" + ui.item.label + "<a class=\"remove\" title=\"Remove\" href=\"javascript:RemoveFSSubItem(" + ui.item.id + ")\"> \× </a></div>";
            $("#list-subitem-fullsearch").append(subitem);
            $("#txtKeywordSub").attr("Style", "width:60px");
            $("#txtKeywordSub").attr("placeholder", "");
            var termsk = split($('#ListFullSubID').val());
            termsk.pop();
            termsk.push(ui.item.id);
            termsk.push("");
            $('#ListFullSubID').val(termsk.join(","));
            return false;
        }
    });
    //Datetime
    $.datepicker.setDefaults($.datepicker.regional['vi']);
    $(".datepicker").datepicker({
        dateFormat: "dd/mm/yy",
        changeMonth: true,
        yearRange: "2000",
        showOn: "button",
        buttonImage: "/Images/calendar.gif",
        buttonImageOnly: true,
        changeYear: true
    });
    //
    function FullSearchBoxSubmit(){
        document.getElementById("FullBoxSearch").submit();
    } 
</script>